<template>
<!--  新增担保信息-->
  <div class="addGuaranteeInformPage">
      <common-title title-name="新增担保信息"/>
      <el-card
          v-loading="isLoading"
          element-loading-text="表单提交中……"
          shadow="never">
          <el-form
              ref="formRef"
              :model="form"
              :rules="rules"
              label-width="120"
          >
              <el-row>
                  <el-col :span="8">
                      <el-form-item label="担保合同号" prop="guaranteeContractNumber">
                          <el-input v-model="form.guaranteeContractNumber" placeholder="请输入担保合同号"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="借款合同号" prop="loanContractNumber">
                          <el-input v-model="form.loanContractNumber" placeholder="请输入借款合同号"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="担保公司" prop="guaranteeCompanyId">
                          <el-select v-model="form.guaranteeCompanyId"  clearable placeholder="请选择担保公司">
                              <el-option v-for="(item,index) in companyList" :key="index" :label="item.companyName" :value="item.companyId"></el-option>
                          </el-select>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="8">
                      <el-form-item label="被担保公司" prop="wasGuaranteedCompanyId">
                          <el-select v-model="form.wasGuaranteedCompanyId" clearable placeholder="请选择被担保公司">
                              <el-option v-for="(item,index) in companyList" :key="index" :label="item.companyName" :value="item.companyId"></el-option>
                          </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="担保金额" prop="guaranteeAmount">
                          <el-input
                              v-model="form.guaranteeAmount"
                              placeholder="请输入担保金额"
                              @input="form.guaranteeAmount = limitInputNum(form.guaranteeAmount,7,0,false)"
                          ></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="借款银行" prop="institutionId">
                          <el-select v-model="form.institutionId" clearable placeholder="请选择借款银行">
                              <el-option v-for="(item,index) in bankList" :key="index" :label="item.institutionName" :value="item.institutionId"></el-option>
                          </el-select>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="8">
                      <el-form-item label="担保期限起" prop="guaranteeStartTime">
                          <el-date-picker
                                  value-format="YYYY-MM-DD"
                                  v-model="form.guaranteeStartTime"
                                  type="date"
                                  placeholder="请选择担保期限"
                                  size="large"
                          />
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="担保期限止" prop="guaranteeEndTime">
                          <el-date-picker
                                  value-format="YYYY-MM-DD"
                                  v-model="form.guaranteeEndTime"
                                  type="date"
                                  placeholder="请选择担保期限"
                                  size="large"
                          />
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="担保方式" prop="type">
                          <el-select v-model="form.type" clearable>
                              <el-option label="对内担保" value="1"></el-option>
                              <el-option label="对外担保" value="2"></el-option>
                              <el-option label="对内借款" value="3"></el-option>
                              <el-option label="对外借款" value="4"></el-option>
                          </el-select>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="8">
                      <el-form-item label="借款期限起" prop="loanStartTime">
                          <el-date-picker
                                  value-format="YYYY-MM-DD"
                                  v-model="form.loanStartTime"
                                  type="date"
                                  placeholder="请选择借款期限"
                                  size="large"
                          />
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="借款期限止" prop="loanEndTime">
                          <el-date-picker
                                  value-format="YYYY-MM-DD"
                                  v-model="form.loanEndTime"
                                  type="date"
                                  placeholder="请选择借款期限"
                                  size="large"
                          />
                      </el-form-item>
                  </el-col>
                  <el-col :span="8">
                      <el-form-item label="借款金额" prop="loanAmount">
                          <el-input
                              v-model="form.loanAmount"
                              placeholder="请输入借款金额"
                              @input="form.loanAmount = limitInputNum(form.loanAmount,7,0,false)"
                          ></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
             <el-row>
                 <el-col :span="24">
                     <el-form-item label="备注" prop="remark" class="form-item-width">
                         <el-input
                                 style="width: 100%"
                                 v-model="form.remark"
                                 :rows="4"
                                 type="textarea"
                                 placeholder="请输入备注"
                         />
                     </el-form-item>
                 </el-col>
             </el-row>
          </el-form>
          <div class="buttons-box d-flex a-center j-center">
              <el-button
                  class="button_cancel2"
                  @click="onCancel"
              >取消</el-button>
              <el-button
                  class="button_view"
                  @click="onSave"
                  :loading="isLoading"
              >保存</el-button>
          </div>
      </el-card>
  </div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import {
    ElCard,
    ElDatePicker,
    ElRow,
    ElCol,
    ElForm,
    ElFormItem,
    ElMessage,
    ElSelect,
    ElOption,
    ElLoading,
} from "element-plus";
import {onMounted, reactive, ref} from "vue";
import {companyApi, financingApi, guaranteeApi} from "@/api/businessFinance";
import {limitInputNum, resetForm} from "@/common/utils/GlobalUtils";
import {useRouter} from "vue-router";


const form = reactive({
    guaranteeCompanyId: '',
    wasGuaranteedCompanyId: '',
    guaranteeContractNumber: '',
    loanContractNumber: '',
    guaranteeAmount: '',
    institutionId: '',
    loanStartTime: '',
    loanEndTime: '',
    guaranteeStartTime: '',
    guaranteeEndTime: '',
    type: '',
    remark: '',
    loanAmount: ''
});

const rules = reactive({
    guaranteeCompanyId: [
        { required: true, message: '请选择担保公司', trigger: 'change' }
    ],
    wasGuaranteedCompanyId: [
        { required: true, message: '请选择被担保公司', trigger: 'change' }
    ],
    guaranteeContractNumber: [
        { required: true, message: '请输入担保合同号', trigger: 'blur' }
    ],
    loanContractNumber: [
        { required: true, message: '请输入借款合同号', trigger: 'blur' }
    ],
    guaranteeAmount: [
        { required: true, message: '请输入担保金额', trigger: 'blur' }
    ],
    institutionId: [
        { required: true, message: '请选择金融机构', trigger: 'change' }
    ],
    loanStartTime: [
        { required: true, message: '请选择借款开始时间', trigger: 'change' }
    ],
    loanEndTime: [
        { required: true, message: '请选择借款结束时间', trigger: 'change' }
    ],
    guaranteeStartTime: [
        { required: true, message: '请选择担保开始时间', trigger: 'change' }
    ],
    guaranteeEndTime: [
        { required: true, message: '请选择担保结束时间', trigger: 'change' }
    ],
    type: [
        { required: true, message: '请选择担保方式', trigger: 'change' }
    ],
    remark: [
        { required: true, message: '请输入备注', trigger: 'blur' }
    ],
    loanAmount: [
        { required: true, message: '请输入借款金额', trigger: 'blur' }
    ]
});

const companyList = ref([]);
/**
 * 查公司列表
 */
const getCompanyList = () => {
    companyApi.getList({}).then(res=>{
        companyList.value = res.data;
    });
}

/**
 * 获取银行信息
 *
 */
const bankList = ref([]);
const getFinancialInstitution = () => {
    financingApi.getFinancialInstitution().then(res=>{
        bankList.value = res.data;
    });
}

/**
 * 保存按钮
 */
const formRef = ref(null);
const router = useRouter();
const isLoading = ref(false);
const onSave = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            isLoading.value = true;
            guaranteeApi.addBankGuarantee(form).then(res=>{
                if(res.code === '200'){
                    isLoading.value = false;
                    ElMessage.success('新增成功!');
                    resetForm(form);
                    router.push({path:'/businessFinance/bankManagement/basicDataMaintenance/security'});
                }else{
                    isLoading.value = false;
                }
            });
        } else {
            console.log('error submit!', fields)
        }
    });
}

/**
 * 跳转担保台账
 */
const onCancel = () => {
  // router.push({ path: '/businessFinance/bankManagement/financingLedger/guaranteeLedger' });
  router.push({ path: '/businessFinance/bankManagement/basicDataMaintenance/security' });
}

onMounted(()=>{
    getCompanyList();
    getFinancialInstitution();
});
</script>

<style lang="scss" scoped>
  .addGuaranteeInformPage{
    .el-form-item{
        display: flex !important;
        margin-bottom: 20px !important;
    }
     .form-item-width {
       :deep(.el-form-item__content){
            width: 100%;
        }
    }
  }
</style>
